<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>温智情趣公司管理系统</title>
<!--    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">-->
    <style>
        body {
            margin:0;
            padding:0;
            font-family:sans-serif;
            background:#2C2255;
            background:url(image/阿西吧.jpg);
            background-size:100%;
        }
        .box {
            width:400px;
            padding:40px;
            position:absolute;
            color: #ba736d;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            background:#191919;
            text-align:center;
        }
        .box h1 {
            color: #0aecb7;
            text-transform:uppercase;
            font-weight:500;
        }
        .box input[type = "text"],.box input[type = "password"]{
            border:0;
            background:none;
            display:block;
            margin:20px auto;
            text-align:center;
            border:2px solid #3498db;
            padding:14px 10px;
            width:200px;
            outline:none;
            color: #259793;
            border-radius:24px;
            transition:0.25s;
        }
        .box input[type = "text"]:focus,.box input[type = "password"]:focus {
            width:280px;
            border-color:#2ecc71;
        }
        button{
            border:0;
            background:none;
            display:block;

            margin:20px auto;
            text-align:center;
            border:2px solid #2ecc71;
            padding:14px 40px;
            outline:none;
            color: #f1ed06;
            border-radius:24px;
            transition:0.25s;
            cursor:pointer;
        }
        .box a:hover {
            background:#2ecc71;
        }
        .message,.message2{
            color: #ff0099;
        }
        .checkbox{
            margin:0px auto;
        }
        .login-a{
            width:30px;
            height:80px;
        }


    </style>
</head>
<body>
    <form id="login-form"  >
        <!--设置隐藏域  -->
        <div class="box">
            <h1>欢迎进入温智情趣公司管理系统，请登录!</h1>
            请输入账号： <input type="text" name="account" id="account">
            <!-- EL表达式 ${属性名} -->
            请输入密码： <input type="password" name="password" id="passwd">
            <p class="message"></p>
            <button id="login-btn" type="button">登录</button>
        </div>
    </form>
    <!--引入js-->
    <script type="text/javascript" src="css/jquery-3.4.1.js"></script>
<!--    <script src="bootstrap/js/bootstrap.js" ></script>-->
<!--    <script src="vue/vue.js" charset="utf-8"></script>-->
    <script>
        //点击登录按钮异步提交数据
        $("#login-btn").click(function () {
            $.ajax({
                type:"post",
                data:$("#login-form").serialize(),
                url:"SystemUser/login",
                dataType:"json",
                success:function (data) {
                    if (data.msg.toString()==""){
                        window.location.href="system/index.html";
                    }else{
                        $(".message").text(data.msg);
                    }
                }
            })
        })
    </script>

</body>
</html>